<template>
  <el-dropdown trigger="click" class="international " style="width: 3rem;" @command="handleSetLanguage">
    <span class="el-dropdown-link">
      <i class="el-icon-s-marketing text-white size-24"></i><i class="el-icon-arrow-down el-icon--right text-white"></i>
    </span>
    <template #dropdown>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :disabled="language==='zh'" command="zh">
          中文
        </el-dropdown-item>
        <el-dropdown-item :disabled="language==='en'" command="en">
          English
        </el-dropdown-item>
        <el-dropdown-item :disabled="language==='es'" command="es">
          Español
        </el-dropdown-item>
        <el-dropdown-item :disabled="language==='ja'" command="ja">
          日本語
        </el-dropdown-item>
        <el-dropdown-item :disabled="language==='ko'" command="ko">
          한국어
        </el-dropdown-item>
        <el-dropdown-item :disabled="language==='it'" command="it">
          Italiano
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script lang="ts">
  import {
    defineComponent,
    toRefs,
    reactive
  } from 'vue';
  import {
    useStore
  } from "vuex";
  import {
    useRouter
  } from 'vue-router';
  import {
    AppModule
  } from '@/store/modules/app'
  export default defineComponent({
    name: 'appselect',
    props: {

    },
    emits: ['onselect'],
    setup(props, {
      emit
    }) {
      //vuex
      const store = useStore();
      //路由
      const router = useRouter();
      //定义data
      const data = reactive({
        language: AppModule.language

      });

      function handleSetLanguage(lang: string) {
        //this.$i18n.locale = lang
        AppModule.SetLanguage(lang)
        document.documentElement.lang = lang
        document.title = "设置"
        emit('onselect', data.language);
        router.go(0);
      }
      //包装参数列表
      const refData = toRefs(data);
      return {
        ...refData,
        handleSetLanguage

      }
    }
  })
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>
